<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Lookie Lookie!</title>
  <meta name="description" content="A website that learns to predict where you are looking at. Written in TensorFlow.js">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link href="https://fonts.googleapis.com/css?family=Roboto|Source+Code+Pro" rel="stylesheet">
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="cs/style.css">
  <link rel="stylesheet" href="cs/virtualkeyboard.css">
</head>

<body background="snow.jpg">
  <!--[if lte IE 9]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <canvas id="heatMap"></canvas>

  <!-- changed -->
  <!-- 将哪吒的初始图像先隐藏 -->
  <div id="neha" class="box" hidden>
    <img src="nezha.jpg"/>
  </div>
  <p id="testX"></p>


  <div id="info" data-content="info">
    <h3>Hi there! 😃</h3>
    <!-- This is Lookie Lookie.<br> -->
    <!-- Please enable your webcam. -->
    这里是 瞳话<br>
    请允许网页端使用摄像头
  </div>

  <div id="training">
    <!-- 将训练相关数据进行隐藏 -->
    <!-- <table>
      <tr>
        <td>Training examples</td>
        <td data-content="n-train">0</td>
      </tr>
      <tr>
        <td>Validation examples</td>
        <td data-content="n-val">0</td>
      </tr>
      <tr>
        <td>Epochs trained</td>
        <td data-content="n-epochs">0</td>
      </tr>
      <tr>
        <td>Training loss</td>
        <td data-content="train-loss">?</td>
      </tr>
      <tr>
        <td>Validation loss</td>
        <td data-content="val-loss">?</td>
      </tr>
    </table> -->

    
    <div class="buttonwrap">
      <!-- 设置自动训练按键  -->
      <!-- disabled属性进行设置 使用户在满足某些条件时（比如选中复选框，等等）才能点击按钮 -->
      <!-- 可使用 JavaScript 来删除 disabled 属性，使该按钮变为可用的状态 -->
      <div class="buttonrow">
        <button id="start-automatic-training" disabled>start-automatic-training</button>
      </div>

      <div class="buttonrow">
        <button id="start-training" disabled>Start Training</button>
        <button id="reset-model" disabled>Reset Model</button>
      </div>

      <!-- <div class="buttonrow">
        <button id="draw-heatmap" disabled>Draw Heatmap</button>
        <button id="clear-heatmap" disabled>Clear Heatmap</button>
      </div> -->
      <!-- <div class="buttonrow">
        <button id="store-data" disabled>Save Dataset</button>
        <button id="load-data">Load Dataset</button>
        <input type="file" id="data-uploader">
      </div>
      <div class="buttonrow">
        <button id="store-model" disabled>Save Model</button>
        <button id="load-model">Load Model</button>
        <input type="file" id="model-uploader" multiple>
      </div> -->

      <!-- <div class="buttonrow">
        <button id="AI-music" onmouseover="">AI-music</button>
      </div> -->
    </div>
  </div>

  <!-- <video id="webcam" width="400" height="300" autoplay></video> -->
  <!-- <canvas id="overlay" width="400" height="300"></canvas> -->
  <video id="webcam" width="400" height="300" autoplay></video>
  <canvas id="overlay" width="400" height="300"></canvas>

  <!-- <footer>
    Created with TensorFlow.js by Max Schumacher.
    <a href="https://github.com/cpury/lookie-lookie" target="_blank" alt="Source">Source</a>
  </footer> -->

  <canvas id="eyes" width="50" height="25"></canvas>

  <div id="target" style="display: none;"></div>
  <!-- <button id="Start-playmusic" onclick="startOrStop(event, player)" style="display: none;">Play</button>
  <button id="PlayRNN" onclick="playRNN(event)" style="display: none;">PlayRNN</button> -->
  <!-- <div class="grid">
    <button id="1" onclick="createMusic(62)">62</button>
    <button id="2" onclick="createMusic(63)">63</button>
    <button id="3" onclick="createMusic(64)">64</button>
    <button id="4" onclick="createMusic(65)">65</button>
    <button id="5" onclick="createMusic(52)">52</button>
    <button id="6" onclick="createMusic(53)">53</button>
    <button id="7" onclick="createMusic(54)">54</button>
    <button id="8" onclick="createMusic(55)">55</button>
    <button id="9" onclick="createMusic(56)">56</button>
    <button id="10" onclick="createMusic(57)">57</button>
    <button id="11" onclick="createMusic(58)">58</button>
    <button id="12" onclick="createMusic(66)">66</button>
    <button id="13" onclick="createMusic(59)">59</button>
    <button id="14" onclick="createMusic(60)">60</button>
    <button id="15" onclick="createMusic(61)">61</button>
    <button id="16" onclick="createMusic(67)">67</button>

  </div> -->

  
  <!-- <img id="frames" src="snow.jpg" width="1504" height="940"> -->

  <!-- 拼接数字键盘 -->
  <!-- 第一阶段隐藏 进入第二阶段 -->

  <div id="pkp"  style="display: none;">
		<div id="grid-container-1" class="grid-container" style="display: none;">
		  <div id="item1-1"class="item1"  style="display: none;">
			<div id="screen"  style="display: none;">
			  <p><span id="text"  style="display: none;"></span><span id="cursor"   style="display: none;">|</span></p>
			</div>
		  </div>
		  <div id="item2-2" class="item2" style="display: none;">
			<button id="001" data-key-value="`" data-secondary-value="~" style="display: none;" >~<br>`</button>
		  </div>
		  <div id="item3-3" class="item3"  style="display: none;">
			<button id="002" class="spacebar" data-key-value=" " style="display: none;">空格</button>
		  </div>  
		  <div id="item4-4" class="item4"  style="display: none;">
			<button id="003" class="delete"  style="display: none;">delete</button>
		  </div>
		  <div id="item5-5" class="item5"  style="display: none;">
			<button id="004" data-key-value="-" data-secondary-value="_"  style="display: none;">_<br>-</button>
		  </div>
		  <div id="item6-6" class="item6" style="display: none;">
			<!-- <button id="005" data-key-value="=" data-secondary-value="+" style="display: none;">+<br>=</button> -->
			<button id="005" data-key-value="=" data-secondary-value="+" style="display: none;">AI-music</button>
		  </div>
		  
      <div id="item7-7" class="item7" style="display: none;">
			<button id="006" data-key-value="[" data-secondary-value="{" style="display: none;">{<br>[</button>
		  </div>
		  <div id="item8-8" class="item8"  style="display: none;">
			<button id="007" data-key-value="]" data-secondary-value="}" style="display: none;">}<br>]</button>
		  </div>
		  <div id="item9-9" class="item9" style="display: none;">
			<button id="008" class="caps-lock"  style="display: none;">caps lock</button>
		  </div>
      
	  </div>
	
	  
	  <div id="keys"  style="display: none;">
		<div id="row-1" class="row" style="display: none;">
		  <button id="009" data-key-value="1" data-secondary-value="!" style="display: none;">!<br>1</button>
		  <button id="010" data-key-value="2" data-secondary-value="@"  style="display: none;">@<br>2</button>
		  <button id="011" data-key-value="3" data-secondary-value="#" style="display: none;" >#<br>3</button>
		  <button id="012" data-key-value="4" data-secondary-value="$" style="display: none;" >$<br>4</button>
		  <button id="013" data-key-value="5" data-secondary-value="%" style="display: none;" >%<br>5</button>
		  <button id="014" data-key-value="6" data-secondary-value="^" style="display: none;" >^<br>6</button>
		  <button id="015" data-key-value="7" data-secondary-value="&" style="display: none;" >&<br>7</button>
		  <button id="016" data-key-value="8" data-secondary-value="*" style="display: none;" >*<br>8</button>
		  <button id="017" data-key-value="9" data-secondary-value="(" style="display: none;" >(<br>9</button>
		  <button id="018" data-key-value="0" data-secondary-value=")" style="display: none;" >)<br>0</button>
		</div>
		<div id="row-2" class="row" style="display: none;">
		  <button id="019" data-key-value="q" style="display: none;" >Q</button>
		  <button id="020" data-key-value="w" style="display: none;" >W</button>
		  <button id="021" data-key-value="e" style="display: none;" >E</button>
		  <button id="022" data-key-value="r" style="display: none;" >R</button>
		  <button id="023" data-key-value="t" style="display: none;" >T</button>
		  <button id="024" data-key-value="y" style="display: none;" >Y</button>
		  <button id="025" data-key-value="u" style="display: none;" >U</button>
		  <button id="026" data-key-value="i" style="display: none;" >I</button>
		  <button id="027" data-key-value="o" style="display: none;" >O</button>
		  <button id="028" data-key-value="p" style="display: none;" >P</button>
		</div>
		<div id="row-3" class="row" style="display: none;">
		  <button id="029" data-key-value="a" style="display: none;" >A</button>
		  <button id="030" data-key-value="s" style="display: none;" >S</button>
		  <button id="031" data-key-value="d" style="display: none;" >D</button>
		  <button id="032" data-key-value="f" style="display: none;" >F</button>
		  <button id="033" data-key-value="g" style="display: none;" >G</button>
		  <button id="034" data-key-value="h" style="display: none;" >H</button>
		  <button id="035" data-key-value="j" style="display: none;" >J</button>
		  <button id="036" data-key-value="k" style="display: none;" >K</button>
		  <button id="037" data-key-value="l" style="display: none;" >L</button>
		  <button id="038" data-key-value=";" data-secondary-value=":" style="display: none;" >:<br>;</button>
		</div>
		<div id="row-4" class="row" style="display: none;">
		  <button id="039" data-key-value="z" style="display: none;" >Z</button>
		  <button id="040" data-key-value="x" style="display: none;" >X</button>
		  <button id="041" data-key-value="c" style="display: none;" >C</button>
		  <button id="042" data-key-value="v" style="display: none;" >V</button>
		  <button id="043" data-key-value="b" style="display: none;" >B</button>
		  <button id="044" data-key-value="m" style="display: none;" >M</button>
		  <button id="045" data-key-value="," data-secondary-value="&#60;" style="display: none;" >&#60;<br>,</button>
		  <button id="046" data-key-value="." data-secondary-value="&#62;" style="display: none;" >&#62;<br>.</button>
		  <button id="047" data-key-value="/" data-secondary-value="?" style="display: none;" >?<br>/</button>
		</div>
	</div>


  


  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.5.0"></script>
  <script src="js/vendor/clmtrackr.js"></script>
  <script src="js/globals.js"></script>
  <script src="js/ui.js"></script>
  <script src="js/facetracker.js"></script>
  <script src="js/mouse.js"></script>
  <script src="js/dataset.js"></script>
  <script src="js/training.js"></script>
  <script src="js/heat.js"></script>
  <script src="js/main.js"></script>
  <script src="js/virtualkeyboard.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>

</html>
